<template>
  <div class="question-container">
    <el-card>
      <!-- 新增试题 -->
      <el-row type="flex" justify="space-between" class="btn_wrapper">
          <span style="font-size: 12px; color: pink">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push({name: 'questions-new'})">新增试题</el-button>
      </el-row>
      <!-- 表单 -->
      <el-form label-width="80px" size="small">
        <!-- 学科 二级目录 标签 关键字 -->
        <el-row type="flex">
          <!-- 学科 -->
          <el-col>
            <el-form-item label="学科">
              <el-select v-model="formData.subjectID" placeholder="请选择" class="inputW" @change="getSubjectsSimple">
                <el-option v-for="item in subjectID" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col>
            <el-form-item label="二级目录">
              <el-select v-model="formData.catalogID" placeholder="请选择" class="inputW" @focus="directorys">
                <el-option v-for="item in directorysList" :key="item.id" :label="item.directoryName" :value="item.directoryName" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col>
            <el-form-item label="标签">
              <el-select v-model="formData.tags" placeholder="请选择" class="inputW" @focus="tags">
                <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.tagName" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col>
            <el-form-item label="关键字">
              <el-input v-model="formData.keyword" placeholder="根据题干搜索" class="inputW" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 试题类型 难度 方向 录入人 -->
        <el-row type="flex">
          <!-- 试题类型 -->
          <el-col>
            <el-form-item label="试题类型">
              <el-select v-model="formData.questionType" placeholder="请选择" class="inputW">
                <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col>
            <el-form-item label="难度">
              <el-select v-model="formData.difficulty" placeholder="请选择" class="inputW">
                <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col>
            <el-form-item label="方向">
              <el-select v-model="formData.direction" placeholder="请选择" class="inputW">
                <el-option v-for="item in direction" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col>
            <el-form-item label="录入人">
              <el-select v-model="formData.creatorID" placeholder="请选择" class="inputW" @focus="getCreatorID">
                <el-option v-for="item in creatorID" :key="item.id" :label="item.username" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 题目备注 企业简称 城市 -->
        <el-row type="flex">
          <!-- 题目备注 -->
          <el-col>
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks" class="inputW" />
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col>
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName" class="inputW" />
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col>
            <el-form-item label="城市">
              <el-select v-model="formData.province" placeholder="请选择" style="width: 48%; margin-right: 2%" @change="formData.city = null">
                <el-option v-for="item in cityList.province" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <el-select v-model="formData.city" placeholder="请选择" style="width: 50%" @focus="getArea">
                <el-option v-for="item in cityList.city" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col>
            <el-row type="flex" justify="end">
              <el-button size="small" plain @click="resetAll">清除</el-button>
              <el-button size="small" type="primary" @click="getQuestions()">搜索</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告 -->
      <PageTool :show-before="true">
        <span slot="before">{{ title }}</span>
      </PageTool>
      <!-- 题目列表 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120" />
        <el-table-column prop="subject" label="学科" min-width="80px" />
        <el-table-column prop="catalog" label="目录" min-width="80px" />
        <el-table-column prop="questionType" :formatter="type" label="题型" min-width="80px" />
        <el-table-column prop="question" :formatter="html2Text" label="题干" width="280">
        </el-table-column>
        <el-table-column prop="addDate" :formatter="formDate" label="录入时间" width="180" />
        <el-table-column prop="difficulty" :formatter="going" label="难度" min-width="80px" />
        <el-table-column prop="creator" label="录入人" min-width="80px" />
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <!-- 预览 -->
            <el-tooltip class="item" effect="light" content="预览" placement="bottom-start" :visible-arrow="false" :open-delay="1000">
              <el-button type="primary" icon="el-icon-view" circle size="small" plain @click="preview(row.id)"></el-button>
            </el-tooltip>
            <!-- 修改 -->
            <el-tooltip class="item" effect="light" content="修改" placement="bottom-start" :visible-arrow="false" :open-delay="1000">
              <el-button type="success" icon="el-icon-edit" circle size="small" plain @click="edit(row.id)"></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip class="item" effect="light" content="删除" placement="bottom-start" :visible-arrow="false" :open-delay="1000">
              <el-button type="danger" icon="el-icon-delete" circle size="small" plain @click="del(row.id)"></el-button>
            </el-tooltip>
            <!-- 加入精选 -->
            <el-tooltip class="item" effect="light" content="加入精选" placement="bottom-start" :visible-arrow="false" :open-delay="1000">
              <el-button type="warning" icon="el-icon-check" circle size="small" plain @click="addSelection(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="margin-top: 20px">
        <el-pagination background layout="->, prev, pager, next, sizes, jumper" :total="total" :page-size="formData.pagesize"
          :current-page="formData.page" :page-sizes="[5, 10, 20, 50]" @size-change="SizeChange"
          @current-change="CurrentChange">
        </el-pagination>
      </el-row>
    </el-card>
    <QuestionsPreview :show-dialog.sync="showDialog" :previewList="previewList"/>
  </div>
</template>

<script>
import { getQuestions, delQuestions, getSubjectsSimple, getUserSimple, selected, tags, directorys, getQuestionsInfo } from '@/api/hmmm/questions.js'
import { html2Text, parseTime, going, type } from '@/utils/index'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
export default {
  name: 'Questions',
  async created () {
    this.getQuestions()
    this.cityList.province = await provinces()
    const { data } = await getSubjectsSimple()
    this.subjectID = data
  },
  components: {
    QuestionsPreview
  },
  data () {
    return {
      title: '数据一共 0 条',
      list: [], // 题目列表
      value: '',
      total: 0, // 总数
      // 城市列表
      cityList: {
        province: [], // 城市
        city: [] // 地区
      },
      formData: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        questionType: null, // 试题类型
        difficulty: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      difficulty, // 试题难度
      questionType, // 试题类型
      direction, // 方向
      subjectID: [], // 学科列表
      creatorID: [], // 录入人
      tagsList: [], // 标签
      directorysList: [], // 二集目录
      showDialog: false, // 控制弹层显示
      previewList: {}

    }
  },
  methods: {
    // 改变每页显示数量
    SizeChange (val) {
      this.formData.pagesize = val
      this.getQuestions()
    },
    // 改变当前页码
    CurrentChange (val) {
      this.formData.page = val
      this.getQuestions()
    },
    async getQuestions () {
      const { data } = await getQuestions(this.formData)
      this.total = data.counts
      this.title = `数据一共 ${data.counts} 条`
      this.list = data.items
      // data.items.forEach((item, index) => {
      //   // 题型
      //   switch (item.questionType) {
      //     case '1':
      //       this.$set(this.list[index], 'questionType', '单选')
      //       break
      //     case '2':
      //       this.$set(this.list[index], 'questionType', '多选')
      //       break
      //     case '3':
      //       this.$set(this.list[index], 'questionType', '简述')
      //       break
      //   }
      //   // 难度
      //   switch (item.difficulty) {
      //     case '1':
      //       this.$set(this.list[index], 'difficulty', '简单')
      //       break
      //     case '2':
      //       this.$set(this.list[index], 'difficulty', '一般')
      //       break
      //     case '3':
      //       this.$set(this.list[index], 'difficulty', '困难')
      //       break
      //   }
      // })
    },
    // 格式化题干
    html2Text (row, column, cellValue, index) {
      return html2Text(cellValue)
    },
    // 格式化时间
    formDate (row, column, cellValue, index) {
      return parseTime(cellValue)
    },
    // 格式化难度
    going (row, column, cellValue, index) {
      return going(cellValue)
    },
    // 格式化类型
    type (row, column, cellValue, index) {
      return type(cellValue)
    },
    // 点击删除按钮 删除对应的题目
    async del (id) {
      console.log(id)
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await delQuestions(id)
        const { data } = await getQuestions(this.formData)
        if (data.items.length === 0 && this.formData.page > 1) {
          this.formData.page--
          this.getQuestions()
        } else {
          // this.total = data.counts
          // this.list = data.items
          this.getQuestions()
        }
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error(err)
      }
    },
    // 点击编辑跳转页面，并且传送id
    async edit (id) {
      this.$router.push({
        name: 'questions-new',
        query: { id: id }
      })
    },
    // 点击加入精选按钮
    async addSelection (row) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      try {
        await selected({
          id: row.id,
          choiceState: 1
        })
        const { data } = await getQuestions(this.formData)
        if (data.items.length === 0 && this.formData.page > 1) {
          this.formData.page--
          this.getQuestions()
        } else {
          this.getQuestions()
        }
        this.$message.success('加入精选成功')
      } catch (err) {
        this.$message.error(err)
      }
    },
    // 改变城市获取城市的崎岖
    getArea () {
      this.cityList.city = citys(this.formData.province)
    },
    // 清除所有
    resetAll () {
      this.formData = {
        subjectID: null, // 学科
        questionType: null, // 试题类型
        difficulty: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        area: null, // 企业所在城市的地区
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      }
    },
    // 获取学科
    getSubjectsSimple () {
      // const { data } = await getSubjectsSimple()
      // this.subjectID = data
      this.formData.catalogID = ''
    },
    // 获取录入人
    async getCreatorID () {
      const { data } = await getUserSimple()
      this.creatorID = data
    },
    // 获取二级目录
    async directorys () {
      if (this.formData.subjectID) {
        const { data } = await directorys({
          subjectID: this.formData.subjectID
        })
        this.directorysList = data.items
      }
    },
    // 获取标签
    async tags () {
      const { data } = await tags()
      this.tagsList = data.items
    },
    // 点击预览按钮显示题目预览弹层
    async preview (id) {
      try {
        const { data } = await getQuestionsInfo(id)
        this.previewList = data
        this.previewList.questionType = type(data.questionType) + '题'
        this.previewList.difficulty = going(data.difficulty)
        this.previewList.answer = html2Text(data.answer)
        this.previewList.question = html2Text(data.question)
        this.showDialog = true
      } catch (err) {
        console.log(err)
        this.$message.error(err)
      }
    }
  }
}
</script>

<style scoped >
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}

.btn_wrapper {
  margin-bottom: 15px;
}

.inputW {
  width: 100%;
}
</style>